<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-button" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">资金提现</text>
        </div>
        <div class="header-right">
          <view class="help-button">
            <text class="fas fa-question-circle"></text>
          </view>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 可提现金额卡片 -->
      <section class="amount-cards-section">
        <div class="amount-cards-grid">
          <!-- 可提现金额卡片 -->
          <view class="amount-card available">
            <text class="amount-label">可提现金额</text>
            <view class="amount-value-container">
              <text class="amount-value">¥{{ availableAmount }}</text>
              <text class="amount-unit">元</text>
            </view>
            <text class="amount-hint"><text class="fas fa-info-circle"></text> 最低提现5元</text>
          </view>
          <!-- 累计提现金额卡片 -->
          <view class="amount-card total">
            <text class="amount-label">累计提现</text>
            <view class="amount-value-container">
              <text class="amount-value">¥{{ totalWithdrawn }}</text>
              <text class="amount-unit">元</text>
            </view>
            <text class="amount-hint"><text class="fas fa-chart-line"></text> 本月已提现3笔</text>
          </view>
        </div>
      </section>

      <!-- 提现表单 -->
      <section class="withdrawal-form-section">
        <!-- 提现金额输入 -->
        <div class="form-group">
          <text class="form-label">提现金额 (元)</text>
          <view class="amount-input-container">
            <text class="amount-input-prefix">¥</text>
            <input 
              class="amount-input" 
              type="number" 
              v-model="withdrawAmount" 
              placeholder="请输入提现金额" 
              @input="validateAmount"
              :min="5"
              :max="availableAmount"
              step="0.01"
            />
          </view>
          <view class="amount-input-footer">
            <text class="all-withdraw-btn" @click="withdrawAll">全部提现</text>
            <text class="amount-error" v-if="amountError">{{ amountError }}</text>
          </view>
        </div>

        <!-- 提现方式选择 -->
        <div class="form-group">
          <text class="form-label">提现方式</text>
          <view class="payment-options">
            <view 
              class="payment-option" 
              :class="{ 'selected': selectedPayment === 'wechat' }"
              @click="selectPayment('wechat')"
            >
              <div class="payment-option-left">
                <view class="payment-icon wechat">
                  <text class="fab fa-weixin"></text>
                </view>
                <div class="payment-info">
                  <text class="payment-name">微信零钱</text>
                  <text class="payment-detail">已绑定: ****6789</text>
                </div>
              </div>
              <view class="payment-radio">
                <view class="radio-circle" :class="{ 'checked': selectedPayment === 'wechat' }">
                  <view class="radio-dot" v-if="selectedPayment === 'wechat'"></view>
                </view>
              </view>
            </view>
            

          </view>
        </div>

        <!-- 提现到账时间 -->
        <view class="arrival-time-hint">
          <text class="fas fa-clock"></text>
          <text>预计2小时内到账 (如遇节假日可能延迟)</text>
        </view>

        <!-- 提现按钮 -->
        <button 
          class="withdraw-submit-btn" 
          :disabled="!isValidAmount"
          @click="submitWithdrawal"
        >
          确认提现
        </button>
      </section>

      <!-- 提现记录 -->
      <section class="withdrawal-records-section">
        <div class="section-header">
          <text class="section-title">提现记录</text>
          <view class="view-all-btn" @click="viewAllRecords">
            <text>全部记录</text>
            <text class="fas fa-angle-right"></text>
          </view>
        </div>
        <div class="records-list">
          <!-- 提现记录项 -->
          <view class="record-item" v-for="record in withdrawalRecords" :key="record.id">
            <div class="record-main">
              <div class="record-left">
                <view class="record-icon" :class="record.status">
                  <text class="fas" :class="record.icon"></text>
                </view>
                <div class="record-info">
                  <text class="record-type">{{ record.type }}</text>
                  <text class="record-time">{{ record.time }}</text>
                </div>
              </div>
              <div class="record-right">
                <text class="record-amount">+{{ record.amount }}</text>
                <text class="record-status" :class="record.status">{{ record.statusText }}</text>
              </div>
            </div>
            <div class="record-footer">
              <text class="record-id">提现单号: {{ record.orderId }}</text>
              <text class="record-arrival-time">{{ record.arrivalTime }}</text>
            </div>
          </view>
        </div>
      </section>
    </main>

    <!-- 提现成功弹窗 -->
    <view class="modal-overlay" v-if="showSuccessModal" @click="closeSuccessModal">
      <view class="modal-content" @click.stop>
        <view class="success-icon">
          <text class="fas fa-check"></text>
        </view>
        <text class="modal-title">提现申请提交成功</text>
        <text class="modal-message">我们将尽快处理您的提现申请，请耐心等待</text>
        <button class="modal-confirm-btn" @click="closeSuccessModal">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      availableAmount: '128.50',
      totalWithdrawn: '1,850.00',
      withdrawAmount: '',
      selectedPayment: 'wechat',
      amountError: '',
      showSuccessModal: false,
      withdrawalRecords: [
        {
          id: 1,
          type: '微信零钱提现',
          time: '2023-06-10 15:30',
          amount: '¥100.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023061015304589',
          arrivalTime: '到账时间: 2023-06-10 15:42',
          icon: 'fa-check'
        },
        {
          id: 2,
          type: '微信零钱提现',
          time: '2023-05-25 09:15',
          amount: '¥50.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023052509156327',
          arrivalTime: '到账时间: 2023-05-25 09:28',
          icon: 'fa-check'
        },
        {
          id: 3,
          type: '微信零钱提现',
          time: '2023-06-20 16:45',
          amount: '¥30.00',
          status: 'processing',
          statusText: '处理中',
          orderId: '2023062016457892',
          arrivalTime: '预计2小时内到账',
          icon: 'fa-clock'
        }
      ]
    }
  },
  computed: {
    isValidAmount() {
      const amount = parseFloat(this.withdrawAmount);
      const available = parseFloat(this.availableAmount);
      return !isNaN(amount) && amount >= 5 && amount <= available && !this.amountError;
    }
  },
  onLoad() {
    // 页面加载时的初始化
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 验证提现金额
    validateAmount() {
      const amount = parseFloat(this.withdrawAmount);
      const available = parseFloat(this.availableAmount);
      
      if (isNaN(amount) || amount < 5) {
        this.amountError = '最低提现金额为5元';
      } else if (amount > available) {
        this.amountError = '提现金额不能超过可提现金额';
      } else {
        this.amountError = '';
      }
    },
    
    // 全部提现
    withdrawAll() {
      this.withdrawAmount = this.availableAmount;
      this.validateAmount();
    },
    
    // 选择提现方式
    selectPayment(type) {
      this.selectedPayment = type;
    },
    
    // 提交提现申请
    submitWithdrawal() {
      if (this.isValidAmount) {
        this.showSuccessModal = true;
        // 清空输入框
        this.withdrawAmount = '';
        this.validateAmount();
      }
    },
    
    // 关闭成功弹窗
    closeSuccessModal() {
      this.showSuccessModal = false;
    },
    
    // 查看全部提现记录
    viewAllRecords() {
      uni.navigateTo({
        url: '/pages/withdrawal-records/index'
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e5f7e9, #eaf1ee);
  padding-bottom: 30rpx;
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.back-button .fas {
  color: #1D2129;
  font-size: 24rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.header-right {
  display: flex;
  align-items: center;
}

.help-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #E8F3FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-button .fas {
  color: #165DFF;
  font-size: 24rpx;
}

/* 主内容区 */
.main-content {
  padding: 140rpx 30rpx 30rpx;
}

/* 金额卡片区域 */
.amount-cards-section {
  margin-bottom: 30rpx;
}

.amount-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.amount-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.amount-card.available {
  background-color: #E8F3FF;
}

.amount-card.total {
  background-color: #E5F7E9;
}

.amount-label {
  font-size: 24rpx;
  color: #86909C;
  text-align: center;
  margin-bottom: 10rpx;
}

.amount-value-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.amount-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #1D2129;
}

.amount-unit {
  font-size: 24rpx;
  color: #86909C;
  margin-left: 10rpx;
}

.amount-hint {
  font-size: 20rpx;
  color: #86909C;
  text-align: center;
  margin-top: 10rpx;
}

.amount-hint .fas {
  margin-right: 5rpx;
}

/* 提现表单区域 */
.withdrawal-form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #1D2129;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: block;
}

.amount-input-container {
  position: relative;
  border: 1rpx solid #F2F3F5;
  border-radius: 20rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.amount-input-prefix {
  font-size: 32rpx;
  color: #1D2129;
  font-weight: 500;
  margin-right: 10rpx;
}

.amount-input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  color: #1D2129;
}

.amount-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.all-withdraw-btn {
  font-size: 24rpx;
  color: #165DFF;
}

.amount-error {
  font-size: 24rpx;
  color: #F53F3F;
}

/* 提现方式选择 */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid #F2F3F5;
  border-radius: 20rpx;
  padding: 25rpx;
}

.payment-option.selected {
  border-color: #165DFF;
  background-color: #E8F3FF;
}

.payment-option-left {
  display: flex;
  align-items: center;
}

.payment-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.payment-icon.wechat {
  background-color: #7BB32E;
}

.payment-icon.alipay {
  background-color: #1677FF;
}

.payment-icon .fab {
  color: #fff;
  font-size: 30rpx;
}

.payment-info {
  display: flex;
  flex-direction: column;
}

.payment-name {
  font-size: 28rpx;
  color: #1D2129;
  font-weight: 500;
}

.payment-detail {
  font-size: 24rpx;
  color: #86909C;
  margin-top: 5rpx;
}

.payment-radio {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-circle {
  width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  border: 2rpx solid #86909C;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-circle.checked {
  border-color: #165DFF;
}

.radio-dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 9rpx;
  background-color: #165DFF;
}

/* 到账时间提示 */
.arrival-time-hint {
  display: flex;
  align-items: center;
  background-color: #E8F3FF;
  border-radius: 15rpx;
  padding: 15rpx 20rpx;
  margin-bottom: 30rpx;
}

.arrival-time-hint .fas {
  color: #165DFF;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.arrival-time-hint text {
  font-size: 24rpx;
  color: #86909C;
  flex: 1;
}

/* 提现按钮 */
.withdraw-submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #165DFF;
  color: #fff;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.withdraw-submit-btn:disabled {
  background-color: #C9CDD4;
  color: #fff;
}

/* 提现记录区域 */
.withdrawal-records-section {
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.view-all-btn {
  display: flex;
  align-items: center;
  color: #165DFF;
  font-size: 24rpx;
}

.view-all-btn .fas {
  margin-left: 5rpx;
  font-size: 20rpx;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.record-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.record-icon.success {
  background-color: #E5F7E9;
}

.record-icon.processing {
  background-color: #FFF7E5;
}

.record-icon .fas {
  font-size: 24rpx;
}

.record-icon.success .fas {
  color: #00B42A;
}

.record-icon.processing .fas {
  color: #FF7D00;
}

.record-info {
  display: flex;
  flex-direction: column;
}

.record-type {
  font-size: 28rpx;
  color: #1D2129;
  font-weight: 500;
}

.record-time {
  font-size: 24rpx;
  color: #86909C;
  margin-top: 5rpx;
}

.record-right {
  text-align: right;
}

.record-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.record-status {
  font-size: 24rpx;
  margin-top: 5rpx;
  display: block;
}

.record-status.success {
  color: #00B42A;
}

.record-status.processing {
  color: #FF7D00;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #F2F3F5;
}

.record-id,
.record-arrival-time {
  font-size: 22rpx;
  color: #86909C;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background-color: #fff;
  border-radius: 30rpx;
  padding: 40rpx;
  width: 80%;
  max-width: 500rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #E5F7E9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.success-icon .fas {
  color: #00B42A;
  font-size: 40rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 10rpx;
}

.modal-message {
  font-size: 24rpx;
  color: #86909C;
  text-align: center;
  margin-bottom: 30rpx;
}

.modal-confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #165DFF;
  color: #fff;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
}
</style>